<div class="blockcms" style="padding-top:10px">
    <div class="blocktitle">
    <h3>
        <div style="float:left">
            <?php
            $currentPage = $this->currentPage;

            if ($currentPage) {
                // check exists parent
                if ($currentPage['all_parent']) {
                    $allParent = explode(',', $currentPage['all_parent']);
                    if (isset($allParent[0])) {
                        $allCategory = $this->allCategory;
                        foreach($allParent as $parentID):
                            $parent = $allCategory[$parentID];
                            // check to ignore root
                            if ($parent['left'] != 1) {
                            ?>
                                <a href="<?php echo BASE_PATH . '/' . CURR_APP ?>?pid=<?php echo $parent['category_id']?>"><?php echo $parent['admin_title'];?></a> >
                            <?php
                            }
                        endforeach;
                    }
                    echo @$currentPage['admin_title'];
                }
            }
            ?>
        </div>
        <div style="clear:both;"></div>
    </h3>
    </div>
        <div class="content" style="padding:10px">
            <table cellspacing="0" cellpadding="0" width="100%">
                <tr>
                    <td class="centerleft"></td>
                    <td class="centercontent">

<?php

if ($currentPage) {
?>
<div style="padding-top: 10px;width:600px;">
    Click <a target="_blank" href="<?php echo BASE_PATH . $currentPage['main_image']; ?>">here to download pdf </a>file.<br>
    or 
    <div style="font-weight:bold;cursor:pointer;" href="<?php echo BASE_URL . '/index/index/viewpdf?file=' .$currentPage['main_image']; ?>" class="loadgallery">Click here to view pdf file.</div>
                                    <?php
                                    echo @$currentPage['description'];
                                    ?>
</div>
<?php
} // if has item
?>

                    </td>
                    <td class="centerright"></td>
                </tr>
            </table>
        </div>
</div>

<!-- pullout content -->
<script type="text/javascript" src="<?php echo JS_PATH?>/jquery/jquery-ui.min.js"></script>
<link rel="stylesheet" href="<?php echo JS_PATH?>/jquery/pulloutcontent/css/pullout.css" type="text/css" media="screen"/>
		<div class="pc_panel" id="pc_panel">
			<div class="pc_label expand"></div>
			<div class="pc_label close"></div>
			<div class="pc_title"></div>
			<div id="pc_wrapper" class="pc_wrapper">
				<div id="pc_content">
					<div class="pc_item">
						<h2></h2>
						<p></p>
						<div class="pc_more"></div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
			<div id="pc_slider" class="pc_slider"></div>
		</div>
        <script type="text/javascript">
            $(function() {
				//window width and height
				var window_w 					= $(window).width();
				var window_h 					= $(window).height();
				//the main panel div
				var $pc_panel = $('#pc_panel');
				//the wrapper and the content divs
				var $pc_wrapper					= $('#pc_wrapper');
				var $pc_content					= $('#pc_content');
				//the slider / slider div
				var $pc_slider					= $('#pc_slider');
				//the element reference - reaching this element
				//activates the panel
				var $pc_reference 				= $('#pc_reference');
				
				var maxWidth,maxHeight,marginL;
				
				buildPanel();
				
				function buildPanel(){
					$pc_panel.css({'height': window_h + 'px'});
					hidePanel();
					//we want to display the items in a grid.
					//we need to calculate how much width and height
					//the wrapper should have.
					//we also want to display it centered, so we need to calculate
					//the margin left of the wrapper
					
					//First, lets see how much of height:
					//maxHeight = Math.floor((window_h-20)/135)*135;
					//20 => pc_titles height
					//135 => 125 of each items height plus its margin (10)
					maxHeight 		= Math.floor((window_h-20)/135)*135;
					//maxWidth = Math.floor((window_w-35)/220)*220;
					//220 = item width + margins (left and right)
					//maxWidth 		= Math.floor((window_w-35)/220)*220;
					maxWidth 		= window_w;
					//marginL  		= (window_w - maxWidth)/2;
					$pc_wrapper.css({
						'width' 		: maxWidth + 20 + 'px',
						'height'		: maxHeight +'px',
						'margin-left' 	: marginL + 'px'
					});
				
					//innitialize the slider
					try{
						$pc_slider.slider('destroy');
					}catch(e){}
					//total_scroll is the number of how much we can scroll
					var total_scroll = $pc_content.height()-maxHeight;
					//add a slider to scroll the content div
					//hidden until the panel is expanded
					if(total_scroll > 0){
						$pc_slider.slider({
							orientation	: 'vertical',
							max			: total_scroll,
							min			: 0,
							value		: total_scroll,
							slide		: function(event, ui) {
								$pc_wrapper.scrollTop(Math.abs(ui.value-total_scroll));
							}
						}).css({
							'height'	: maxHeight -40 + 'px',//40 extra
							'left'		: maxWidth + 20 + marginL + 'px',
							'top'		: 30 + 20 + 'px',
							//30 = 20 of title + 10 margin, 20 extra
							'display'	: 'none'
						});
					}
				}

				//the panel gets positioned out of the viewport,
				//and ready to be slided out!
				function hidePanel(){
					//165 => 20 pc_title + 120 item + margins
					$pc_panel.css({
						'right'	: -window_w + 'px',
						//'top'	: window_h - 165 + 'px'
						'top'	: '0px'
					}).show();
					try{
						//position the slider in the beginning
						slideTop();
					}catch(e){}
					$pc_slider.hide();
					$pc_panel.find('.collapse')
					.addClass('expand')
					.removeClass('collapse');
				}
				
				//resets the slider by sliding it to the top
				function slideTop(){
					var total_scroll 	= $pc_content.height()-maxHeight;
					$pc_wrapper.scrollTop(0);
					$pc_slider.slider('option', 'value', total_scroll );
				}

                /*
				$(window).bind('scroll',function(){
					
					//When we reach the element pc_reference, we want to show the panel.
					//Let's get the distance from the top to the element
					var distanceTop = $pc_reference.offset().top - window_h;
					if($(window).scrollTop() > distanceTop){
						if(parseInt($pc_panel.css('right'),10) == -window_w)
							$pc_panel.stop().animate({'right':'0px'},300);
					}
					else{
						if(parseInt($pc_panel.css('right'),10) == 0)
							$pc_panel.stop().animate({'right': -window_w + 'px'},300,function(){
								hidePanel();
							});
					}
				}).bind('resize',function(){
					//on resize calculate the windows dimentions again,
					//and build the panel accordingly
					window_w 			= $(window).width();
					window_h 			= $(window).height();
					buildPanel();
				});
                */

				//when clicking on the expand button,
				//we animate the panel to the size of the window,
				//reset the slider and show it
				$pc_panel.find('.expand').bind('click',function(){
					var $this = $(this);
					$pc_wrapper.hide();
					$pc_panel.stop().animate({'top':'0px'},500,function(){
						$pc_wrapper.show();
						slideTop();
						$pc_slider.show();
						$this.addClass('collapse').removeClass('expand');
					});
				})

				//clicking collapse will hide the slider,
				//and minimize the panel
				$pc_panel.find('.collapse').live('click',function(){
					var $this = $(this);
					$pc_wrapper.hide();
					$pc_slider.hide();
					$pc_panel.stop().animate({'top':window_h - 165 + 'px'},500,function(){
						$pc_wrapper.show();
						$this.addClass('expand').removeClass('collapse');
					});
				});
			
				//clicking close will make the panel disappear
				$pc_panel.find('.close').bind('click',function(){
							$pc_panel.stop().animate({'right': -window_w + 'px'},300,function(){
								hidePanel();
							});
					//$pc_panel.remove();
					//$(window).unbind('scroll').unbind('resize');
				});
			
				//mouse over the items add class "selected"
                $pc_wrapper.find('.pc_item').hover(
				function(){
					$(this).addClass('selected');
				},
				function(){
					$(this).removeClass('selected');
				}
			).bind('click',function(){
					window.open($(this).find('.pc_more').html());
            });
               
            // set content to pull out
            $('.loadgallery').click(function(){
                    $("#pc_content").html('');
                    var thisObj = $(this);
					$pc_panel.stop().animate({'right':'0px'},500,function(){
						$pc_wrapper.show();
						slideTop();
						$pc_slider.show();
						$pc_panel.find('.expand').addClass('collapse').removeClass('expand');
                        $("#pc_content").html(
                            '<iframe src="' + $(thisObj).attr('href') + '" width="'+ ($(window).width())+'" height="'+ ($(window).height() - 50) +'" style="border:0px"></iframe>'
                        );
					});
                    /*
                    */
                });
			});
        </script>